<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="24">
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="进货单号">
              <a-input placeholder="请输入进货单号" v-model="searchForm.purchaseNumber"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="供应商">
              <a-select placeholder="请输入供应商" v-model="searchForm.supplierId">
                <a-select-option
                  :key="item.supplierId"
                  v-for="item in supplier_option"
                  :value="item.supplierId"
                >{{ item.supplierName }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="付款">
              <a-select placeholder="是否付款" v-model="searchForm.state">
                <a-select-option
                  :key="item.id"
                  v-for="item in state_option"
                  :value="item.id"
                >{{ item.value }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-button type="primary" @click="search">查询</a-button>
          </a-col>
          <a-col :xl="10" :lg="11" :md="12" :sm="24">
            <a-form-item label="收货日期">
              <j-date placeholder="请输入收货时间" class="query-group-cust" v-model="searchForm.purchaseDate"></j-date>
            </a-form-item>
          </a-col>

        </a-row>

      </a-form>
    </div>
    <a-table :columns="columns"
             :row-key="record => record.id"
             :dataSource="dataSource"
             :pagination="false"
    >
    <span slot="isState" slot-scope="text,record">
      {{ record.state == 1 ? '已付款' : '未付款' }}
    </span>
      <span slot="action" slot-scope="text,record">
      <a-button type="primary" size="small" @click="checkGoods(record.purchaseListId)">查看商品</a-button>
      <br/>
      <a-button type="primary" size="small"  @click="delPurchase(record.purchaseListId)">删除</a-button>
     </span>

    </a-table>
    <a-pagination v-model="searchForm.current" :total="searchForm.total" @change="onChange" :pageSize="searchForm.pageSize" show-less-items />
    <a-table v-show="isShow" :columns="goodsColumns"
             :row-key="record => record.id"
             :dataSource="goodsDataSource"
             :pagination="false">

    </a-table>
  </a-card>
</template>


<script>

import {getAction,postAction} from '@/api/manage'
import JDate from "../../../components/jeecg/JDate";
export default {
  components: {
    JDate,
    getAction,
    postAction

  },

  data() {
    return {
      goodsColumns:[
        {
          title: '编号',
          dataIndex: 'goodsId',
          key: 'goodsId',
        },
        {
          title: '商品名称',
          dataIndex: 'goodsName',
          key: 'goodsName',
        },
        {
          title: '商品型号',
          dataIndex: 'goodsModel',
          key: 'goodsModel',
        },

        {
          title: '单价',
          dataIndex: 'price',
          key: 'price',
        },
        {
          title: '数量',
          dataIndex: 'goodsNum',
          key: 'goodsNum',
        },

        {
          title: '单位',
          dataIndex: 'goodsUnit',
          key: 'goodsUnit',
        },

        {
          title: '总金额',
          dataIndex: 'total',
          key: 'total',
        },
      ],
      goodsDataSource:[
        {
          key: '1',
          name: '胡彦斌',
          age: 32,
          address: '西湖区湖底公园1号',
        },
        {
          key: '2',
          name: '胡彦祖',
          age: 42,
          address: '西湖区湖底公园1号',
        },
      ],
      isShow:false,
      searchForm: {
        total:5,
        current:1,
        pageSize:2,
        purchaseNumber: '',
        supplierId: '',
        state: '',
        purchaseDate: '',
      },

      columns: [
        {
          title: '进货单号',
          dataIndex: 'purchaseNumber',
          key: 'purchaseNumber',
        },
        {
          title: '进货日期',
          dataIndex: 'purchaseDate',
          key: 'purchaseDate',
        },

        {
          title: '供应商',
          dataIndex: 'supplierName',
          key: 'supplierName',
        },
        {
          title: '进货金额',
          dataIndex: 'amountPaid',
          key: 'amountPaid',
        },

        {
          title: '操作员',
          dataIndex: 'userName',
          key: 'userName',
        },
        {
          title: '是否付款',
          dataIndex: 'state',
          //key:'state',
          scopedSlots: {customRender: 'isState'}
        },
        {
          title: '备注',
          dataIndex: 'remarks',
          key: 'remarks',
        },
        {
          title: '操作',
          dataIndex: 'action',
          align:"center",
          fixed:"right",
          width:147,
          scopedSlots: { customRender: 'action' }
        }
      ],

      dataSource: [
        {
          purchaseNumber: '',
          purchaseDate: '',
          supplierName: '',
          amountPaid: '',
          userName: '',
          state: '',
          remarks: ''
        },

      ],
      searchList: '',
      url: {
        list: "/tbPurchaseList/purchaseList",
        supplierlist: "/tbPurchaseList/supplierlist",
        goodsList:"purchaseListGoods/goodsList",
        delete:"purchaseListGoods/delete",

      },
      searchUse:[],
      supplier_option: [],
      state_option: [{
        id: 0,
        value: "未付"
      }, {
        id: 1,
        value: "已付"
      },],
    };
  },

  created() {
    this.search();
    getAction(this.url.supplierlist, this.searchList).then((res) => {
      this.supplier_option = res;
    })

  },
  methods: {
    onChange(){
      this.search();
    },
    checkGoods(purchaseListId){
      this.isShow=true;
      this.searchGoods(purchaseListId);

    },
    delPurchase(purchaseListId){
      let pid={
        purchaseListId:purchaseListId
      }
      if (confirm("是否删除")){
        postAction(this.url.delete,pid).then((res)=>{
          if (res===1){
            alert("删除成功")
            this.search();
          }
        })
      }


    },
    searchGoods(purchaseListId){
      let pid={
        purchaseListId:purchaseListId
      }
      postAction(this.url.goodsList,pid).then((res)=>{
        this.goodsDataSource=res
      })
    },
    search() {
      this.isShow=false
      getAction(this.url.list, this.searchForm).then((res) => {
        this.dataSource = res.list
        for (let i = 0; i < res.list.length; i++) {
          this.dataSource[i].userName = res.list[i].user.userName
          this.dataSource[i].supplierName = res.list[i].supplier.supplierName
          this.searchForm.total=res.total;
          //console.log(res.list)

        }
      })
    }

  }
};
</script>
<style lang="scss">
</style>